<template>
  <div>
    <button @click="show = !show">点击我切换显示与隐藏</button>
    <!-- transiton:组件,全局组件。可以在任意组件内直接使用-->
    <!-- name属性值:如果页面中有多个多度动画需求,区分样式类名。 如果没有书写name，默认类名v-xxx开头,
       如果有name属性值，类名就以name属性值开头使用。这样可以去多个过渡动画效果!!!
     -->
    <transition name="lmy">
      <div class="box" v-show="show">
        <h3>我是H3标题</h3>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data(){
    return {show:false}
  }

}
</script>
<!-- 在style标签身上加上一个lang=less属性,代表style里面书写的less样式 -->
<!-- 进入阶段的过渡动画 -->
<style scoped lang="less">
@color:pink;
@f:red;
.box{
  width: 400px;
  height: 300px;
  background: @color;
  h3{
    color: @f;
  }
}

/* 进入阶段的过渡动画*/
/*进入开始阶段*/
.lmy-enter{
  opacity: 0;
  transform: rotate(0deg);
}

/* 定义进入阶段过渡动画时间、速率类名地方*/
.lmy-enter-active{
  /*定义过渡动画时间、速率等等*/
transition: all 8s;
}

/*进入结束阶段*/
.lmy-enter-to{
  opacity: 1;
  transform: rotate(360deg);
}


/*定义离开阶段的过渡动画*/
/*
  离开阶段的开始状态
*/
.lmy-leave{
  opacity: 1;
  transform: scale(1);
}

/* 定义离开阶段过渡动画时间、速率类名地方*/
.lmy-leave-active{
  transition: all 8s;
}


/*离开阶段的结束状态*/
.lmy-leave-to{
  opacity: 0;
  transform: scale(0);
}


</style>